<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import cancelFullscreen from '../assets/cancelFullScreen.svg?component'
import shutdown from '../assets/shutdown.svg?component'
import Calc from '../uilts/CalcAxisByAcrLength';
import Timer from '../uilts/AccurateTimer.js';
import { useTimeStore } from '../store/time'
let TimeStore = useTimeStore()
let Time = reactive({
    minute: '00',
    second: '00'
})
//start clock


//——timer animation

function toFullScreen() {
    globalRouter.back()
}
let globalRouter = useRouter();
let circleDom = ref(null)
let dashArray = ref(0) //圆形周长
let offset = ref(0) //圆形偏移
let title = ref("摸鱼")
let x = ref(192)    //小圆点的坐标
let y = ref(10)     //小圆点的坐标
let cx = 0      //circledom的圆心坐标
let r = 0       //circledom的半径
let recordTime = ref(0) //记录已经过时间
let doneEvent = (timer) => {
    timer.stop()
}
const props = defineProps({
    startTime: Date,
    duration: Number,
})

function setPersent(persent) {
    if (circleDom.value) {
        circleDom.value.style.strokeDashoffset = dashArray.value - (persent / 100) * dashArray.value
        offset.value = circleDom.value.style.strokeDashoffset
    }
}
function setTitle(_title) {
    title.value = _title
}
function loadDOM() {
    dashArray.value = circleDom.value.getTotalLength()
    circleDom.value.style.strokeDasharray = dashArray.value
    cx = circleDom.value.getAttribute('cx')
    r = circleDom.value.getAttribute('r')
    let timer = startTodo({})
    timer.setStartTime(TimeStore.startTime)
    timer.setDuration(TimeStore.duration)
    timer.setSecond(TimeStore.second)
}
function startTodo({ mode = "backward", second }) {
    let _Timer = Timer(mode, callPerSecond, second)
    _Timer.start()
    return _Timer
    function callPerSecond(remainTime, persent) {
        Time.minute = Math.floor(remainTime / 60)
        Time.second = remainTime % 60
        //更新小圆圈的位置
        setPersent(persent * 100)
        recordTime.value += 1
        //更新进度条位置
        console.log(persent)
        let result = Calc(+offset.value.slice(0, -2), +r, cx)
        x.value = result.x
        y.value = result.y
    }
}
function doneTodo() {

}
function setTask() {
    TodoStore.changeCurrentTodo('002', '摸大鱼')
    console.log(TodoStore.tid)
}
function toPureMode() {
    globalRouter.push('/PureMode')
}
onMounted(loadDOM)

</script>


<template>
    <div id="PureMode" class="relative">
        <header class="py-5 px-40 rounded-b-[4rem] rounded">
            <div>
                <div
                    class="inline-block w-12 h-12 mr-5 rounded-full bg-white text-center text-2xl leading-[3rem] text-[#b2d9d6]"
                >Q</div>
                <span class="text-2xl text-white">Hi,Qiu</span>
                <cancelFullscreen class="float-right" @click="toFullScreen()" />
            </div>
        </header>

        <main class="mt-6">
            <!-- <div
                class="w-72 h-72 text-center leading-[18rem] float-left border-4 rounded-full border-[#f0bdc2]"
            >-->
            <div class>
                <svg class="svg m-auto w-96 h-96">
                    <circle
                        r="182"
                        cy="192"
                        cx="192"
                        stroke-width="5"
                        stroke="#ffffff"
                        stroke-linejoin="round"
                        stroke-linecap="round"
                        fill="none"
                        ref="circleDom"
                        transform="matrix(0,-1,1,0,0,384)"
                        class="transition-all circleTime"
                    />
                    <circle
                        r="10"
                        :cy="y"
                        :cx="x"
                        stroke-linejoin="round"
                        stroke-linecap="round"
                        fill="white"
                        class="transition-all circleDot"
                    />
                    <text
                        x="192"
                        y="220"
                        fill="white"
                        class="text-6xl number timeNumber"
                        text-anchor="middle"
                        align-baseline="central"
                    >{{ Time.minute }}:{{ Time.second }}</text>
                </svg>

                <div class="text-center mt-5">
                    <button
                        id="shutButt"
                        class="w-14 m-auto h-14 bg-[#eeeeee] rounded-full hover:bg-[#f5f5f5]"
                        @click="setPersent(50)"
                    >
                        <shutdown
                            class="w-10 h-10 m-auto text-[#e7c5bb] hover:text-[#f2b5b2] transition"
                        />
                    </button>
                </div>
            </div>
            <div class="relative"></div>
        </main>

        <aside id="pureText">
            <p class>/专注模式/</p>
        </aside>
    </div>
</template>


<style scoped>
#PureMode {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        125deg,
        #af92a4,
        #f2b5b2,
        #f2c2b6,
        #b2d9d6,
        #97b5d7,
        #87acd6
    );
    background-size: 500%;
    animation: bgAnimation 20s linear infinite;
}
@keyframes bgAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#pureText {
    position: fixed;
    bottom: 33%;
    right: 150px;
    color: #fff;
    writing-mode: vertical-lr;
    letter-spacing: 20px;
    font-weight: 600;
}

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#shutButt {
    box-shadow: 0 0 20px 5px #fff;
}

.circleTime {
    box-shadow: 0 0 20px 5px #fff;
}
.timeNumber {
    text-shadow: 0 0 20px 5px #fff;
    stroke: #fff;
    stroke-width: 5px;
    stroke-opacity: 0.5;
    stroke-dashoffset: length;
}
</style>